<@>layout("/common/default.html"){
<style>
    body {
        width: 100%;
        min-height: 95%;
    }

    .layui-table-page {
        padding: 4px 7px 0 !important;
    }

    .x-so {
        margin-bottom: 0px;
    !important;
    }
</style>
<div class="layui-row" style="margin-top: 8px;margin-left: 8px">
    <div class="layui-form layui-col-md12 x-so">
        <input id="name" type="text" name="name" placeholder="角色名称" autocomplete="off" class="layui-input">
        <button class="layui-btn" id="reSearch" onclick="reLoad();">搜索</button>
        <@>if (isTemp == 0){

        <@>} else {
        <div class="layui-inline" >
            <input type="text" placeholder="请输入有效时间" lay-verify="required" name="expireTime" id="expireTime" lay-verify="expireTime"
                   class="layui-input ">
        </div>
        <div class="layui-inline " >
            <label class="layui-btn">有效时间</label>
        </div>

        <@>}
    </div>
</div>
<input type="hidden" name="id" id="userId" value="${user.id}">
<input type="hidden" name="isTemp" id="isTemp" value="${isTemp}">
<input type="hidden" id="roleIds" value="${roleIds}">
<div align="right" style="right: 20px;" id="areachoose">
    <div class="layui-row layui-col-space15 layui-form">
        <table class="layui-table" lay-size="sm" id="role-table" lay-filter="role-table"></table>
    </div>

    <script type="text/html" id="role-state">
        {{#  if(d.state == 1){ }}
        <span class="layui-badge layui-bg-green">有效</span>
        {{#  } }}
        {{#  if(d.state == 0){ }}
        <span class="layui-badge">无效</span>
        {{#  } }}
    </script>
    <script type="text/html" id="table-index">
        {{d.LAY_TABLE_INDEX + 1}}
    </script>
</div>
<script>
    var STATE = false;
    $(function () {
        //绑定回车
        $("input").keydown(function() {
            if (event.keyCode == "13") {//keyCode=13是回车键
                $('#reSearch').click();
            }
        });
        var userId = $('#userId').val();
        var isTemp = $('#isTemp').val();
        var roleIds = $('#roleIds').val();
        var name = $('#name').val();
        if (isTemp == 1) {
            var url = "${ctxPath}/ajax/role/chooselisttemp?userId1=" + userId + '&name=' + name
        } else {
            var url = "${ctxPath}/ajax/role/chooselist?userId1=" + userId + '&name=' + name
        }
        layui.use("table", function () {
            var table = layui.table;
            //当前表格中的全部数据:在表格的checkbox全选的时候没有得到数据, 因此用全局存放变量
            var table_data = new Array();
            table.render({
                elem: "#role-table",
                size: 'sm',
                height: 300,
                page: true,
                cols: [[
                    {field: 'id', type: 'checkbox'},
                    {field: 'index', width: 80, templet: '#table-index', title: '序号'},
                    {field: 'name', width: 280, title: '角色名称'},
                    {field: 'descn', width: 305, title: '角色描述'},
                    {field: 'state', width: 80, sort: true, templet: '#role-state', title: '状态'}
                ]],
                url: url,
                page: { //分页设定
                    layout: ['count', 'prev', 'page', 'next'] //自定义分页布局
                    , curr: 1 //设定初始在第 1 页
                    , limit: 5//每页多少数据
                    , groups: 5 //只显示 5 个连续页码
                }
                , done: function (res, curr, count) {
                    //设置全部数据到全局变量
                    table_data = res.data;
                    //循环所有数据，找出对应关系，设置checkbox选中状态
                    for (var i = 0; i < res.data.length; i++) {
                        if (roleIds.indexOf(res.data[i].id) != -1) {
                            //这里才是真正的有效勾选
                            res.data[i]["LAY_CHECKED"] = 'true';
                            //找到对应数据改变勾选样式，呈现出选中效果
                            var index = res.data[i]['LAY_TABLE_INDEX'];
                            $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                            $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                        }
                    }
                    $('.layui-table th[data-field] div input')[0].remove();
                    $('.layui-table th[data-field] div')[0].remove();

                    if (isTemp == 1) {
                        $('table').find('input[name="layTableCheckbox"]').attr('disabled', true);
                        STATE = false;
                    }
                }
            });
            table.on('checkbox(role-table)', function (obj) {
                var userId = $('#userId').val();
                var isTemp = $('#isTemp').val();
                var expireTime = $('#expireTime').val();
                var roleId = obj.data.id;

                if (expireTime == '') {
                    $.msg("操作失败，请添加有效时间", function () {
                        var form = layui.form;
                        //全选

                        form.render('checkbox');

                    }, 2)
                } else {
                    var now = new Date().valueOf();
                    var t1 = new Date(expireTime).valueOf();
                    if (t1 < now) {
                        $.msg("必须大于当前时间", function () {
                        }, 2)
                    } else {
                        $.cajax('${ctxPath}/ajax/role/chooserole', {
                                userId: userId,
                                roleId: roleId,
                                isTemp: isTemp,
                                expireTime: expireTime,
                                state: obj.checked
                            }, function (r) {
                                var code = r.code;
                                var msg = r.msg;
                                if (code == 1) {
                                    $.msg(msg, function () {
                                        table.render();
                                    }, code, 1000)
                                } else {
                                    $.msg(msg, function () {
                                    }, 2)
                                }
                            }
                        );
                    }
                }


            });
        })
    })

    //保存
    function reLoad() {
        var userId = $('#userId').val();
        var isTemp = $('#isTemp').val();
        var roleIds = $('#roleIds').val();
        var name = $('#name').val();
        if (isTemp == 1) {
            var url = "${ctxPath}/ajax/role/chooselisttemp?userId1=" + userId + '&name=' + name
        } else {
            var url = "${ctxPath}/ajax/role/chooselist?userId1=" + userId + '&name=' + name
        }
        var table = layui.table;
        //当前表格中的全部数据:在表格的checkbox全选的时候没有得到数据, 因此用全局存放变量
        var table_data = new Array();
        table.render({
            elem: "#role-table",
            size: 'sm',
            height: 300,
            page: true,
            cols: [[
                {field: 'id', type: 'checkbox', fixed: 'left'},
                {field: 'index', width: 80, templet: '#table-index', title: '序号'},
                {field: 'name', width: 280, title: '角色名称'},
                {field: 'descn', width: 305, title: '角色描述'},
                {field: 'state', width: 80, sort: true, templet: '#role-state', title: '状态'}
            ]],
            url: url,
            page: { //分页设定
                layout: ['count', 'prev', 'page', 'next'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , limit: 5//每页多少数据
                , groups: 5 //只显示 5 个连续页码
            }
            , done: function (res, curr, count) {
                //数据表格加载完成时调用此函数
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度

                //设置全部数据到全局变量
                table_data = res.data;

                //循环所有数据，找出对应关系，设置checkbox选中状态

                for (var i = 0; i < res.data.length; i++) {
                    if (roleIds.indexOf(res.data[i].id) != -1) {
                        //这里才是真正的有效勾选
                        res.data[i]["LAY_CHECKED"] = 'true';
                        //找到对应数据改变勾选样式，呈现出选中效果
                        var index = res.data[i]['LAY_TABLE_INDEX'];
                        $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                        $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                    }
                }
                $('.layui-table th[data-field] div input')[0].remove();
                $('.layui-table th[data-field] div')[0].remove();

                if (isTemp == 1) {
                    $('table').find('input[name="layTableCheckbox"]').attr('disabled', true);
                    STATE = false;
                }
            }
        });
    }

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        var isTemp = $('#isTemp').val();
        if (isTemp == 1) {
            laydate.render({
                elem: '#expireTime',//指定元素
                type: 'datetime',
                done: function (value, date, endDate) {
                    if (value) {
                        var now = new Date().valueOf();
                        var t1 = new Date(value).valueOf();
                        if (t1 > now) {
                            var inputs = $('table').find('input[name="layTableCheckbox"]').attr('disabled', false);
                            STATE = true;
                        } else {
                            $.msg("必须大于当前时间", function () {

                            }, 2)
                        }

                    } else {
                        var inputs = $('table').find('input[name="layTableCheckbox"]').attr('disabled', true);
                        STATE = false;
                    }
                }
            });
        }
    });
</script>
<@>}